<script lang="ts" setup>
import type { goodsItem } from '@/types/eat'
import { reactive, ref } from 'vue'
const searchText = ref('')
const onClear = (e: any) => {
  flag.value = true
}
// 点击确认发起请求
let flag = ref(true)
const search = (e: any) => {
  // console.log(e.value)
  itemList.unshift({ title: e.value })
  searchData.find((item) => {
    item.comboName === e.value ? (flag.value = false) : (flag.value = true)
  })
}
// 删除搜索历史的数组
const onDelete = () => {
  itemList.map((e) => (e.title = ''))
  console.log(itemList)
}
// 搜索值
const searchData: goodsItem[] = [
  {
    id: '123123',
    imgUrl:
      'https://img2.baidu.com/it/u=509896558,1707102496&fm=253&fmt=auto&app=120&f=JPEG?w=710&h=1262',
    name: '套餐一',
    heat: '能量3012KJ、蛋白质31.5g',
    tag: '新品上架',
    limit: 3,
    discountPrice: 7.5,
    originalPrice: 14,
  },
  {
    id: '1231233422',
    imgUrl:
      'https://img2.baidu.com/it/u=509896558,1707102496&fm=253&fmt=auto&app=120&f=JPEG?w=710&h=1262',
    name: '套餐一',
    heat: '能量3012KJ、蛋白质31.5g',
    tag: '新品上架',
    limit: 3,
    discountPrice: 7.5,
    originalPrice: 14,
  },
  {
    id: '1231234645645',
    imgUrl:
      'https://img2.baidu.com/it/u=509896558,1707102496&fm=253&fmt=auto&app=120&f=JPEG?w=710&h=1262',
    name: '套餐一',
    heat: '能量3012KJ、蛋白质31.5g',
    tag: '新品上架',
    limit: 2,
    discountPrice: 7.5,
    originalPrice: 14,
  },
]
// 渲染数据
const itemList = reactive([
  { title: '套餐一套餐一' },
  { title: '套餐一套餐' },
  { title: '套餐一套餐一套餐' },
  { title: '套餐一' },
  { title: '套餐一套餐一1' },
  { title: '套餐一套餐1' },
  { title: '套餐一套餐一套餐1' },
  { title: '套餐一1' },
])
</script>

<template>
  <!-- 搜索框 -->
  <view class="goodsSearch">
    <uni-search-bar
      v-model="searchText"
      class="uni-mt-10"
      radius="32"
      placeholder="美味套餐搜一搜"
      clearButton="auto"
      cancelButton="none"
      bgColor="#F1F1F1"
      @confirm="search"
      @clear="onClear"
    />
  </view>
  <!-- 搜索历史 -->
  <view v-if="flag">
    <view class="searchHistory">
      <view class="topText">
        <text class="text">搜索历史</text>
        <view @tap="onDelete" class="iconfont icon_shanchu4">
          <text>清空</text>
        </view>
      </view>
      <view class="historyItemBox">
        <view class="historyItem" v-for="item in itemList" :key="item.title">{{ item.title }}</view>
      </view>
    </view>
    <view class="hot">
      <text class="topText">热门推荐</text>
      <view class="hotBoxItem">
        <view class="hotItem" v-for="item in itemList" :key="item.title">{{ item.title }}</view>
      </view>
    </view>
  </view>
  <!-- 套餐组件 -->
  <scroll-view scroll-y enhanced :show-scrollbar="false" v-else class="itemShow">
    <BjsGoodsItem :list="searchData" />
  </scroll-view>
</template>

<style lang="scss">
page {
  background-color: #fff;
  height: 100%;
  overflow: hidden;
}
// 搜索框
.goodsSearch {
  width: 100%;
  padding: 0 20rpx;
}
// 搜索历史
.searchHistory {
  margin-top: 44rpx;
  width: 100%;
  padding: 0 40rpx;
  .topText {
    display: flex;
    position: relative;
    .text {
      font-size: 26rpx;
      color: #000000e5;
    }
    .iconfont {
      position: absolute;
      right: 0;
      height: 30rpx;
      font-size: 28rpx;
      color: #0000004d;
    }
    .iconfont > text {
      margin-left: 8rpx;
      line-height: 30rpx;
      font-size: 22rpx;
    }
  }
}
// 搜索的item
.historyItemBox {
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  margin-top: 20rpx;
  .historyItem {
    margin: 0 20rpx 20rpx 0;
    padding: 12rpx 20rpx;
    height: 56rpx;
    font-size: 22rpx;
    border-radius: 6rpx;
    color: #00000080;
    background-color: #f2f2f2;
  }
}
// 热门推荐
.hot {
  margin-top: 80rpx;
  width: 100%;
  padding: 0 40rpx;
  .topText {
    font-size: 26rpx;
    color: #000000e5;
  }
  .hotBoxItem {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    margin-top: 20rpx;
    .hotItem {
      margin: 0 20rpx 20rpx 0;
      padding: 12rpx 20rpx;
      height: 56rpx;
      font-size: 22rpx;
      border-radius: 6rpx;
      color: #00000080;
      background-color: #f2f2f2;
    }
  }
}
// 套餐组件
.itemShow {
  flex: 1;
  min-height: 400rpx;
  flex: 1;
  margin-top: 24rpx;
  padding: 0 40rpx;
}
</style>
